<template>
  <div class="StatusModal">
    <el-row>
      <el-col :span="24" style="height: auto">
        <div v-if="search_visible" id="search" class="search">
          <el-form ref="form" :model="searchData">
            <el-row :gutter="10">
              <el-col :span="5">
                <el-form-item>
                  <el-select
                    style="display: block"
                    v-model="searchData.shop_id"
                    placeholder="请选择店铺"
                  >
                    <el-option
                      v-for="item in shop_ids"
                      :key="item.val"
                      :value="item.val"
                      :label="item.key"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item>
                  <el-input
                    v-model="searchData.orderId"
                    placeholder="请输入平台订单号"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item>
                  <search-tool
                    :search_data.sync="searchData"
                    @refesh_list="orderList"
                  ></search-tool>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- 工具栏 -->
        <div class="sku_header_left">
          <div>
            <el-button
              type="primary"
              size="small"
              class="el-icon-refresh"
              @click="refreshList"
              :loading="load && percentage > 0"
            >
              同步SKU
            </el-button>
            <el-button
              type="primary"
              size="small"
              class="el-icon-document-checked"
              @click="checkOrder"
              v-show="status === 'ACCEPT'"
            >
              批量审核
            </el-button>
            <el-button
              type="primary"
              size="small"
              class="el-icon-document-checked"
              @click="orderAll"
              v-show="status === 'INSTRUCT'"
            >
              批量下单
            </el-button>
          </div>
          <el-progress
            v-if="load && percentage > 0"
            :text-inside="true"
            style="width: 50%"
            :percentage="percentage"
            :stroke-width="26"
            :format="format"
            text-color="#fff"
          ></el-progress>
          <div>
            <TableTool
              :search_visible.sync="search_visible"
              @refesh_list="orderList"
            ></TableTool>
          </div>
        </div>
      </el-col>
      <el-table
        v-loading="loading1"
        element-loading-text="拼命加载中..."
        element-loading-background="rgba(0, 0, 0, 0.4)"
        :height="
          search_visible
            ? $store.state.user.clientHeight - 340
            : $store.state.user.clientHeight - 300
        "
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#14142B',
          height: '28px',
          padding: '5px 0',
        }"
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="selection"
      >
        <template slot="empty">
          <img
            class="empty-img"
            src="@/assets/imgs/zanwushuju.svg"
            style="width: 64px; height: 50px"
            alt=""
          />
          <div class="noCart">暂无数据</div>
        </template>
        <el-table-column type="selection" label="" width="60"></el-table-column>
        <el-table-column prop="date" min-width="300" label="订单信息">
          <template slot-scope="scope">
            <div class="allStyle1">
              <div class="demo-image__preview">
                <el-image
                  class="imgSrc"
                  src="https://seller-static.yuguo.com/images/product/b93fdb74-5305-4dae-a654-a0e04b14da57.jpg"
                >
                </el-image>
              </div>
              <div class="infoStyle">
                <div>
                  <span class="label_name">店铺ID：</span
                  ><span class="label_val">{{ scope.row.vendorId }}</span>
                </div>
                <div>
                  <span class="label_name">店铺名称：</span
                  ><span class="label_val">和兴国际</span>
                </div>
              </div>
            </div>
            <div class="shopInfo">
              <div>
                <span class="label_name">平台订单号：</span
                ><span class="label_val">{{ scope.row.orderId }}</span>
              </div>
              <div>
                <span class="label_name">订单号状态：</span
                ><span class="label_val" v-if="scope.row.status === 'ACCEPT'"
                  >待审核</span
                >
                <span class="label_val" v-if="scope.row.status === 'INSTRUCT'"
                  >产品准备中</span
                >
                <span class="label_val" v-if="scope.row.status === 'DEPARTURE'"
                  >运送开始</span
                >
                <span class="label_val" v-if="scope.row.status === 'DELIVERING'"
                  >运送中</span
                >
                <span
                  class="label_val"
                  v-if="scope.row.status === 'FINAL_DELIVERY'"
                  >运送完成</span
                >
                <span
                  class="label_val"
                  v-if="scope.row.status === 'NONE_TRACKING'"
                  >卖家自行配送</span
                >
              </div>
              <div>
                <span class="label_name">买家备注：</span
                ><span class="label_val" v-if="scope.row.parcelPrintMessage">{{
                  scope.row.parcelPrintMessage
                }}</span>
                <span v-else>-</span>
              </div>
              <div>
                <span class="label_name">下单时间：</span>
                <span class="label_val">{{ scope.row.orderedAt }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="" align="left" min-width="450" label="商品信息">
          <template slot-scope="scope">
            <div class="right_left">
              <div>
                <div
                  class="allStyle"
                  v-for="(item, index) in scope.row.orderItems"
                  :key="index + '666'"
                >
                  <template v-if="index < 1">
                    <div class="demo-image__preview">
                      <el-image
                        class="imgSrc"
                        @click="preView(item.img)"
                        :preview-src-list="srcList"
                        :src="imgUrl + item.img"
                      >
                      </el-image>
                    </div>
                    <div class="infoStyle shopInfo name">
                      <div style="display: flex; align-items: center">
                        <span class="label_name">商品名称：</span>
                        <el-tooltip
                          class="item"
                          effect="light"
                          :content="item.vendorItemName"
                          placement="top"
                        >
                          <span class="label_val vendor">{{
                            item.vendorItemName
                          }}</span>
                        </el-tooltip>
                      </div>
                      <div>
                        <span class="label_name">商品规格：</span
                        ><span class="label_val">{{
                          item.sellerProductItemName
                        }}</span>
                      </div>
                      <div style="display: flex; align-items: center">
                        <span class="label_name">Sku组名：</span>
                        <el-tooltip
                          class="item"
                          effect="light"
                          :content="item.product_item_title.zh"
                          placement="top"
                        >
                          <span class="label_val vendor">{{
                            item.product_item_title.zh
                          }}</span>
                        </el-tooltip>
                      </div>
                    </div>
                    <div class="shopInfo">
                      <div>
                        <span class="label_name">平台商品ID：</span
                        ><span class="label_val">{{
                          item.sellerProductItemId
                        }}</span>
                      </div>
                      <div>
                        <span class="label_name">商品数量：</span
                        ><span class="label_val">{{ item.amount }}</span>
                      </div>

                      <div>
                        <span class="label_name">关联SKU组：</span
                        ><span class="label_val">{{ item.sku_item_No }}</span>
                        <i
                          @click="connectSku(item.sellerProductItemId)"
                          style="color: #2e82ff"
                          class="el-icon-connection"
                        ></i>
                      </div>
                    </div>
                    <div class="shopInfo">
                      <div>
                        <span class="label_name">售价：</span
                        ><span class="label_val">₩{{ item.salesPrice }}</span>
                      </div>
                      <div>
                        <span class="label_name" style="color: #fff"></span
                        ><span class="label_val" style="color: #fff"
                          >&nbsp;<span
                            style="font-weight: bold; color: #fff"
                          ></span
                        ></span>
                      </div>
                      <div style="text-align: center; cursor: pointer">
                        <span
                          class="label_name"
                          @click="checkInventory(item)"
                          style="color: #2e82ff"
                          >查看库存<i style="color: red"
                            >({{ item.InventoryNub }})</i
                          ></span
                        >
                      </div>
                    </div>
                  </template>
                  <template
                    v-if="
                      index >= 1 && showIndex.indexOf(scope.row.orderId) !== -1
                    "
                  >
                    <div class="demo-image__preview">
                      <el-image
                        class="imgSrc"
                        @click="preView(item.img)"
                        :preview-src-list="srcList"
                        :src="imgUrl + item.img"
                      >
                      </el-image>
                    </div>
                    <div class="infoStyle shopInfo name">
                      <div style="display: flex; align-items: center">
                        <span class="label_name">商品名称：</span>
                        <el-tooltip
                          class="item"
                          effect="light"
                          :content="item.vendorItemName"
                          placement="top"
                        >
                          <span class="label_val vendor">{{
                            item.vendorItemName
                          }}</span>
                        </el-tooltip>
                      </div>
                      <div>
                        <span class="label_name">规格：</span
                        ><span class="label_val">{{
                          item.sellerProductItemName
                        }}</span>
                      </div>
                      <div style="display: flex; align-items: center">
                        <span class="label_name">中文品名：</span>
                        <el-tooltip
                          class="item"
                          effect="light"
                          :content="item.product_item_title.zh"
                          placement="top"
                        >
                          <span class="label_val vendor">{{
                            item.product_item_title.zh
                          }}</span>
                        </el-tooltip>
                      </div>
                    </div>
                    <div class="shopInfo">
                      <div>
                        <span class="label_name">平台商品ID：</span
                        ><span class="label_val">{{
                          item.sellerProductItemId
                        }}</span>
                      </div>
                      <div>
                        <span class="label_name">商品数量：</span
                        ><span class="label_val">{{ item.amount }}</span>
                      </div>
                      <div>
                        <span class="label_name">关联SKU组：</span
                        ><span class="label_val">{{ item.sku_item_No }}</span>
                        <i
                          @click="connectSku(item.sellerProductItemId)"
                          style="color: #2e82ff"
                          class="el-icon-connection"
                        ></i>
                      </div>
                    </div>
                    <div class="shopInfo">
                      <div>
                        <span class="label_name">售价：</span
                        ><span class="label_val">₩{{ item.salesPrice }}</span>
                      </div>
                      <div>
                        <span class="label_name" style="color: #fff"></span
                        ><span class="label_val" style="color: #fff"
                          >&nbsp;<span
                            style="font-weight: bold; color: #fff"
                          ></span
                        ></span>
                      </div>
                      <div style="text-align: center; cursor: pointer">
                        <span
                          class="label_name"
                          @click="checkInventory(item)"
                          style="color: #2e82ff"
                          >查看库存<i style="color: red"
                            >({{ item.InventoryNub }})</i
                          ></span
                        >
                      </div>
                    </div>
                  </template>
                </div>
              </div>
              <div style="text-align: center">
                <span
                  @click="expandShopping(scope.row.orderId)"
                  class="labels"
                  v-if="scope.row.orderItems.length > 1"
                  style="color: #24acf2; cursor: pointer"
                  >更多<i style="color: red"
                    >（{{ scope.row.orderItems.length }}）</i
                  ><i class="el-icon-d-caret"></i
                ></span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="receiver" min-width="350" label="物流信息">
          <template slot-scope="scope">
            <div class="shopInfo">
              <div>
                <span class="label_name">收货人：</span
                ><span class="label_val" v-if="scope.row.receiver.name">{{
                  scope.row.receiver.name
                }}</span>
                <span v-else>-</span>
              </div>
              <div>
                <span class="label_name">联系方式：</span
                ><span
                  class="label_val"
                  v-if="scope.row.overseaShippingInfoDto.ordererPhoneNumber"
                  >{{
                    scope.row.overseaShippingInfoDto.ordererPhoneNumber
                  }}</span
                >
              </div>
              <div>
                <span class="label_name">收货地址：</span
                ><span class="label_val" v-if="scope.row.receiver.addr1">{{
                  scope.row.receiver.addr1 + scope.row.receiver.addr2
                }}</span>
                <span v-if="status === 'INSTRUCT'"
                  >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i
                    @click="editOrderer(scope.row)"
                    style="color: #2e82ff"
                    class="el-icon-edit"
                  ></i
                ></span>
              </div>
              <div>
                <span class="label_name">邮编：</span
                ><span class="label_val" v-if="scope.row.receiver.postCode">{{
                  scope.row.receiver.postCode
                }}</span>
              </div>
              <div>
                <span class="label_name">通关符：</span
                ><span
                  style="color: #0cc50c"
                  class="label_val"
                  v-if="
                    scope.row.overseaShippingInfoDto
                      .personalCustomsClearanceCode
                  "
                  >{{
                    scope.row.overseaShippingInfoDto
                      .personalCustomsClearanceCode
                  }}</span
                >
              </div>
              <div v-if="status !== 'ACCEPT'">
                <span class="label_name">国内物流单号：</span
                ><span
                  style="color: #2e82ff"
                  class="label_val"
                  v-for="(item, index) in scope.row.waybill_No"
                  :key="index + 'a'"
                  >{{ item }}&nbsp;&nbsp;&nbsp;</span
                >
                <span v-if="scope.row.waybill_No.length === 0" class="label_val"
                  >未填写</span
                >
                <span v-if="status === 'INSTRUCT'"
                  ><i
                    @click="editOrderer(scope.row, true)"
                    style="color: #2e82ff"
                    class="el-icon-edit"
                  ></i
                ></span>
              </div>
              <div v-if="status !== 'ACCEPT'">
                <span class="label_name">发货备注：</span
                ><span v-if="scope.row.remarks" class="label_val">{{
                  scope.row.remarks
                }}</span
                ><span v-else class="label_val">-</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="" width="220" label="系统反馈">
          <template slot-scope="scope">
            <div class="shopInfo">
              <div>
                <div
                  v-for="(item, index) in scope.row.error_msg"
                  style="color: red"
                  class="label_val"
                >
                  {{ index + 1 }}、{{ item }}
                </div>
                <div v-if="scope.row.error_msg === null" class="label_name">
                  暂无反馈
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          width="120"
          v-if="status === 'ACCEPT' || status === 'INSTRUCT'"
          align="left"
          label="操作"
        >
          <template slot-scope="scope">
            <div class="operate">
              <el-button
                v-if="status === 'ACCEPT'"
                @click="process(scope.row)"
                type="text"
                size="small"
                >审核
              </el-button>
              <el-button
                v-if="status === 'INSTRUCT'"
                @click="downOrder(scope.row)"
                type="text"
                size="small"
                >下单
              </el-button>
              <!--              <el-button-->
              <!--                v-if="status !== 'ACCEPT'"-->
              <!--                @click=""-->
              <!--                type="text"-->
              <!--                size="small"-->
              <!--                >查看-->
              <!--              </el-button>-->
              <!--              <el-button v-if="status !== 'ACCEPT'" type="text" size="small"-->
              <!--                >操作日志-->
              <!--              </el-button>-->
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <Pagination :child-msg="pageparm" @callFather="callFather"></Pagination>
    </el-row>
    <OrdererModal
      @submit="submitClick"
      @closeForm="closeDialog"
      :dialogVisible.sync="dialogVisible"
      :editData="editData"
      :dialogTitle="dialogTitle"
    ></OrdererModal>
    <orderModal
      @submit="submitClick1"
      @closeForm="closeDialog1"
      @changeActive="changeActive"
      :shipmentBoxIds="shipmentBoxIds"
      :dialogTitle="dialogTitle1"
      :dialogVisible.sync="dialogVisible1"
      :active="active"
      :finishCheck="finishCheck"
      :description="description"
      :status="stepStatus"
    ></orderModal>
    <Inventory
      @closeForm="closeDialog2"
      :dialogVisible.sync="dialogVisible2"
      :editData="editData2"
      :dialogTitle="dialogTitle2"
    >
    </Inventory>
  </div>
</template>

<script>
import { orderList, refreshSku, processOrder } from "@/api/order";
import {
  add_waybillNo,
  getShopList,
  placeOrder,
  upOrderer,
} from "@/api/coupang";
import Bus from "@/socket/bus";
import OrdererModal from "./OrdererModal.vue";
import orderModal from "./orderModal.vue";
import Inventory from "./Inventory.vue";
import { getClientId } from "@/utils/auth";
import store from "@/store";

export default {
  name: "StatusModal",
  components: { OrdererModal, orderModal, Inventory },
  props: {
    activeName: {
      type: String,
      default: "",
    },
    activeName1: {
      type: String,
      default: "",
    },
    activeName2: {
      type: String,
      default: "",
    },
    activeName3: {
      type: String,
      default: "",
    },
    activeName4: {
      type: String,
      default: "",
    },
    activeName5: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      percentage: 0,
      loading: false,
      loading1: false,
      load: false,
      total: 0,
      showIndex: [],
      searchData: {},
      search_visible: true,
      tableData: [],
      imgUrl: "",
      formInline: {
        page: 1,
        limit: 20,
      },
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 20,
        total: 0,
      },
      shop_ids: [],
      status: "",
      hx_status: "",
      srcList: [],
      shipmentBoxId: [],
      shipmentBoxIds: [],
      rowId: "",
      dialogVisible: false,
      dialogVisible1: false,
      dialogTitle: "",
      editData: {},
      active: 0,
      finishCheck: "",
      description: "",
      stepStatus: "",
      dialogVisible2: false,
      editData2: {},
      dialogTitle2: "",
      dialogTitle1: "",
    };
  },
  watch: {
    activeName: {
      handler(val) {
        if (val && val === "ACCEPT") {
          this.status = val;
          this.hx_status = "ready";
          this.orderList();
          this.getShopList();
        }
      },
      immediate: true,
    },
    activeName1: {
      handler(val) {
        if (val && val === "INSTRUCT") {
          this.status = val;
          this.hx_status = "ready";
          this.orderList();
          this.getShopList();
        }
      },
    },
    activeName2: {
      handler(val) {
        if (val && val === "DEPARTURE") {
          this.status = val;
          this.hx_status = "pass";
          this.orderList();
          this.getShopList();
        }
      },
    },
    activeName3: {
      handler(val) {
        if (val && val === "DELIVERING") {
          this.status = val;
          this.hx_status = "pass";
          this.orderList();
          this.getShopList();
        }
      },
    },
    activeName4: {
      handler(val) {
        if (val && val === "FINAL_DELIVERY") {
          this.status = val;
          this.hx_status = "pass";
          this.orderList();
          this.getShopList();
        }
      },
    },
    activeName5: {
      handler(val) {
        if (val && val === "NONE_TRACKING") {
          this.status = val;
          this.hx_status = "pass";
          this.orderList();
          this.getShopList();
        }
      },
    },
    // "$store.state.order.status": {
    //   deep: true, //深度监听设置为 true
    //   handler: function (newVal, oldVal) {
    //     if (newVal === 200) {
    //       this.$message({
    //         type: "success",
    //         message: store.state.order.notice_content,
    //       });
    //     } else if (newVal === 411) {
    //       this.$message({
    //         type: "error",
    //         message: store.state.order.notice_content,
    //       });
    //     }
    //   },
    // },
    // "$store.state.order.Num": {
    //   deep: true, //深度监听设置为 true
    //   handler: function (newVal, oldVal) {
    //     this.percentage = newVal;
    //   },
    // },
  },
  methods: {
    //查看库存
    checkInventory(item) {
      this.dialogVisible2 = true;
      this.editData2 = item;
      this.dialogTitle2 = "SKU库存";
    },
    closeDialog2() {
      this.dialogVisible2 = false;
    },
    //获取店铺列表
    async getShopList() {
      this.loading = true;
      try {
        const res = await getShopList();
        if (res.data.status === 200) {
          this.shop_ids = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
        this.loading = false;
      } catch (error) {
        this.loading = false;
        this.$message.error("系统错误");
      }
    },
    expandShopping(e) {
      if (this.showIndex.indexOf(e) === -1) {
        this.showIndex.push(e);
      } else {
        this.showIndex.forEach((item, index) => {
          if (item === e) {
            this.showIndex.splice(index, 1);
          }
        });
      }
    },
    //---------------------webscoket--------------------------
    refreshList() {
      if (this.searchData.shop_id) {
        this.percentage = 0;
        this.load = true;
        this.total = 0;
        this.refreshSKU({
          shop_id: this.searchData.shop_id,
          client_id: getClientId().client_id,
        });
      } else {
        this.$message.warning("请先选择店铺");
      }
    },
    format(percentage) {
      return `进度：${percentage}%
           剩余：${this.total}条`;
    },
    //-------------------------修改收货人信息-------------------
    editOrderer(row, flag) {
      if (flag) {
        this.dialogVisible = true;
        this.dialogTitle = "国内物流单号";
        this.editData = row;
      } else {
        this.dialogVisible = true;
        this.dialogTitle = "收货人信息";
        this.editData = row;
      }
    },
    //关闭弹窗
    closeDialog() {
      this.dialogVisible = false;
    },
    submitClick(val) {
      if (val.waybill_No) {
        this.add_waybillNo(val);
      } else {
        this.upOrderer(val);
      }
    },
    async upOrderer(obj) {
      const res = await upOrderer(obj);
      if (res.data.status === 200) {
        this.$message({
          type: "success",
          message: res.data.msg,
        });
        this.orderList();
      } else {
        this.$message({
          type: "error",
          message: res.data.msg,
        });
      }
    },
    async add_waybillNo(obj) {
      const res = await add_waybillNo(obj);
      if (res.data.status === 200) {
        this.$message({
          type: "success",
          message: res.data.msg,
        });
        this.orderList();
      } else {
        this.$message({
          type: "error",
          message: res.data.msg,
        });
      }
    },
    //-------------------------修改收货人结束-------------------
    //-------------------------批量下单------------------------
    orderAll() {
      if (this.shipmentBoxIds.length > 0) {
        this.reset();
        this.dialogVisible1 = true;
        this.dialogTitle1 = "批量下单";
        this.dialogTitle1 = "批量下单";
      } else {
        this.$message.warning("请选择订单");
      }
    },
    closeDialog1() {
      this.dialogVisible1 = false;
      this.orderList();
    },
    submitClick1(val) {
      this.placeOrder(val);
    },
    async placeOrder(obj) {
      const res = await placeOrder(obj);
      if (res.data.status === 200) {
        this.stepStatus = "success";
        this.finishCheck = "待审核";
        this.description = res.data.msg;
        this.active = 3;
      } else {
        this.stepStatus = "error";
        this.finishCheck = "校验失败";
        this.description = "请根据系统反馈修正后再提交";
        this.orderList();
        Bus.$off("message");
        this.$message({
          type: "error",
          message: "校验失败",
        });
        this.active = 3;
      }
      setTimeout(() => {
        this.closeDialog1();
      }, 2000);
    },
    downOrder(row) {
      this.reset();
      this.dialogVisible1 = true;
      this.dialogTitle1 = "下单";
      this.shipmentBoxIds = [row.orderId];
    },
    changeActive(val) {
      this.active = val;
    },
    reset() {
      this.active = 0;
      this.finishCheck = "";
      this.description = "";
      this.stepStatus = "";
    },
    //-------------------------批量下单结束---------------------
    //请求接口
    async refreshSKU(obj) {
      const res = await refreshSku(obj);
      if (res.data.status === 200) {
        this.$message.success(res.data.msg);
      } else {
        Bus.$off("message");
        this.$message.error(res.data.msg);
      }
    },
    //获取店铺信息
    async orderList() {
      const obj = { status: this.status, hx_status: this.hx_status };
      this.loading1 = true;
      try {
        Object.assign(obj, this.searchData, this.formInline);
        const res = await orderList(obj);
        if (res.data.status === 200) {
          this.tableData = res.data.data.data;
          this.imgUrl = res.data.imgUrl;
          this.pageparm.currentPage = res.data.data.current_page;
          this.pageparm.total = res.data.data.total;
          this.pageparm.pageSize = res.data.data.per_page;
        } else {
          this.$message.error(res.data.msg);
        }
        this.loading1 = false;
      } catch (error) {
        this.loading1 = false;
        this.$message.error("系统错误");
      }
    },
    //---------------------------审核订单--------------------------
    selection(rows) {
      this.shipmentBoxId = [];
      this.shipmentBoxIds = [];
      rows.forEach((item) => {
        this.shipmentBoxId.push({
          shipmentBoxId: item.shipmentBoxId,
          vendorId: item.vendorId,
        });
        this.shipmentBoxIds.push(item.orderId);
      });
    },
    async checkOrder() {
      if (this.shipmentBoxId.length > 0) {
        const res = await processOrder({ data: this.shipmentBoxId });
        if (res.data.status === 200) {
          this.$message({
            type: "success",
            message: res.data.msg,
          });
          this.orderList();
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
          });
        }
      } else {
        this.$message.warning("请选择订单");
      }
    },
    async process(row) {
      const res = await processOrder({
        data: [
          {
            vendorId: row.vendorId,
            shipmentBoxId: row.shipmentBoxId,
          },
        ],
      });
      if (res.data.status === 200) {
        this.$message({
          type: "success",
          message: res.data.msg,
        });
        this.orderList();
      } else {
        this.$message({
          type: "error",
          message: res.data.msg,
        });
      }
    },
    //---------------------------审核结束----------------------------
    //---------------------------关联SKU----------------------------
    connectSku(id) {
      this.$router.push({ path: "/warehouse/coupang", query: { id: id } });
    },
    //---------------------------关联结束----------------------------
    //分页插件
    callFather(parm) {
      this.formInline.page = parm.currentPage;
      this.formInline.limit = parm.pageSize;
      this.orderList({ status: this.status });
    },
    //图片预览
    preView(row) {
      this.srcList = [];
      this.srcList.push(`${this.imgUrl}${row}`);
    },
  },
};
</script>

<style scoped lang="scss">
.sku_header_left {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}

.vendor {
  display: inline-block;
  width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.imgSrc {
  width: 68px;
  height: 68px;
}

.name {
  width: 190px;
}

::v-deep .el-input__inner {
  height: 32px;
  line-height: 32px;
}

.el-form-item {
  margin-bottom: 0;
}

::v-deep .el-progress-bar__inner {
  text-align: left;
}

::v-deep .demo-image__preview {
  width: 68px;
  height: 68px;
}

.operate {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
}

.allStyle1 {
  display: flex;
  justify-content: start;
  //align-items: center;
  margin-bottom: 8px;

  ::v-deep .el-image__inner {
    border: 1px solid #f5f5f5;
    border-radius: 5px;
  }

  .demo-image__preview {
    margin-right: 10px;
  }

  .infoStyle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    font-size: 12px;

    .label_name {
      color: #999999;
    }

    .label_val {
      color: #44444f;
    }
  }
}

.allStyle {
  display: flex;
  justify-content: space-around;
  //align-items: center;
  margin-bottom: 8px;

  ::v-deep .el-image__inner {
    border: 1px solid #f5f5f5;
    border-radius: 5px;
  }

  .demo-image__preview {
    margin-right: 10px;
  }

  .infoStyle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    font-size: 12px;

    .label_name {
      color: #999999;
    }

    .label_val {
      color: #44444f;
    }
  }
}

::v-deep .el-button--text {
  margin-left: 10px;
}

.shopInfo {
  .label_name {
    color: #999999;
    font-size: 12px;
  }

  .label_val {
    color: #44444f;
    font-size: 12px;
  }
}
</style>
